<template>
  <div class="new-msg-tips" @click="toNewMessage" v-if="newMessageLengthObj[sessionIdSelected]">
    {{ newMessageLengthObj[sessionIdSelected] }} 条新消息
    <el-icon :size="10"><IEpArrowDownBold /></el-icon>
  </div>
</template>

<script setup lang="ts">
// 获取新消息数量
import { newMessageLengthFunc } from "@/components/ChatBox/Hooks";
import { emitterEmit } from "@/mitt/mitt";
import { sessionIdSelectedFunc } from "@/views/ChatView/Hooks";
import type { Ref } from "vue";

// 获取选中的对话
const [getSessionIdSelected, setSessionIdSelected] = sessionIdSelectedFunc();
const sessionIdSelected: Ref<string> = getSessionIdSelected();

// 这个数据sessionId是不是有新数据的对象
const [getNewMessageLengthObj, setNewMessageLength] = newMessageLengthFunc();
const newMessageLengthObj = getNewMessageLengthObj();

// 滚动到最底部并且清空新消息提示
const toNewMessage = () => {
  setNewMessageLength(sessionIdSelected.value,0);
  emitterEmit("scrollEnd");
};
</script>

<style scoped lang="less">
.new-msg-tips {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  -webkit-column-gap: 4px;
  -moz-column-gap: 4px;
  column-gap: 4px;
  align-items: center;
  padding: 2px 12px;
  font-size: 14px;
  color: var(--el-color-primary-light-3);
  cursor: pointer;
  background-color: var(--background-secondary);
  border: 1px solid var(--color-white);
  border-radius: 12px;
  box-shadow: 0 0 1px 1px var(--el-box-shadow-dark);
}
</style>
